<template>
  <BaseDialog
    :title="getTitle"
    :visible="visible"
    :auto-height="true"
    :width="588"
    confirm-text="确定"
    @open="handleOpen"
    @handle-confirm="handleCacheConfirm"
    @close="handleCacheClose"
  >
    <el-form
      ref="formEl"
      class="w-full"
      label-position="left"
      label-width="70px"
      :rules="rules"
      :model="formState"
    >
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="formState.name" placeholder="请输入分组名称" />
      </el-form-item>
      <el-form-item prop="node_ids">
        <el-transfer
          v-model="formState.node_ids"
          filterable
          :titles="['待选择节点', '已选择节点']"
          :filter-method="filterMethod"
          filter-placeholder="请输入节点名称"
          :data="data"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formState.remark"
          placeholder="请输入内容"
          class="w-full"
        />
      </el-form-item>
      <el-form-item label="排序" prop="order" class="mb-0">
        <el-input
          v-model="formState.order"
          placeholder="请输入排序"
          class="w-full"
        />
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>
<script lang="ts" setup>
import type { NodeData } from '@/apis/model/node'
import BaseDialog from '@/components/base-dialog'
import type { FormRules, FormInstance } from 'element-plus'
import { ElNotification } from 'element-plus'
const emit = defineEmits(['refresh-table', 'closeDialog'])
interface IProps {
  visible: boolean
  record?: any | null
  nodeList: NodeData[]
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  record: null
})
interface IIFormState {
  id?: string
  name: string
  remark: string
  order: string
  node_ids: string[]
}
const formState = reactive<IIFormState>({
  name: '',
  remark: '',
  order: '',
  node_ids: []
})
const formEl = ref<FormInstance>()
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  order: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})
const getTitle = computed(() => {
  return !props?.record?.id ? '新增分组' : '编辑分组'
})
interface Option {
  label: string
  key: string
  initial: string
}
const generateData = () => {
  const data: Option[] = []
  props.nodeList.forEach((item: NodeData) => {
    data.push({
      label: item.name,
      key: item.id as string,
      initial: item.name
    })
  })
  return data
}
const data = ref<Option[]>()
const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
const isUpdate = ref(false)
//弹窗打开
const handleOpen = () => {
  isUpdate.value = props?.record?.id
  formState.node_ids = []
  Object.assign(formState, props.record)
  data.value = generateData()
}
// 弹窗确认
const handleCacheConfirm = () => {
  formEl.value?.validate().then(() => {
    const api_path = isUpdate.value ? update_group : create_group
    const msg = isUpdate.value ? '更新' : '新增'
    if (!isUpdate.value) delete formState.id
    const { node_num, create_at, ...params } = formState as any
    api_path({ ...params })
      .then(() => {
        ElNotification.success({
          title: '成功',
          message: msg + '成功'
        })
      })
      .finally(() => {
        emit('refresh-table')
        handleCacheClose()
      })
  })
}
// 弹窗关闭
const handleCacheClose = () => {
  emit('closeDialog')
  formEl.value?.resetFields()
}
</script>

<style lang="scss" scoped></style>
